<template>
  <div>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="编辑支付券"
      :ghost="false"
      @back="() => $router.go(-1)"
    ></a-page-header>

    <page-header-wrapper>
      <a-card :bordered="false">
        <a-form-model
          ref="alipayForm"
          :model="alipayForm"
          :rules="alipayRules"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 11 }"
        >
          <a-form-model-item label="发放结束时间" prop="publish_end_time">
            <a-date-picker
              v-model="alipayForm.publish_end_time"
              show-time
              format="YYYY-MM-DD HH:mm:ss"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择"
            />
          </a-form-model-item>

          <template v-if="period_type === 'RELATIVE'">
            <a-form-model-item label="有效天数" prop="valid_days_after_receive">
              <a-input-number  
                placeholder="请选择" 
                :precision="0" 
                :min="0" 
                v-model="alipayForm.valid_days_after_receive" />
            </a-form-model-item>
          </template>
          <template v-else>
            <a-form-model-item label="使用时间" prop="valid_end_time">
              <a-date-picker
                v-model="alipayForm.valid_end_time"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择"
              />
            </a-form-model-item>
          </template>

          <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button v-loading="btnLoading" type="primary" @click="onSubmit"> 提交 </a-button>
            <a-button style="margin-left: 10px" @click="$router.go(-1)"> 取消 </a-button>
          </a-form-model-item>
        </a-form-model>
      </a-card>
    </page-header-wrapper>
  </div>
</template>

<script>
import { voucherQuery,voucherModify } from '@/api/marketing/alipayPromotion'

export default {
  data() {
    return {
      btnLoading: false,
      queryTime: [],
      alipayForm: {
        id:"",
        alipay_activity_id:"",
        valid_days_after_receive:"",
        publish_end_time:"",
        valid_end_time:"",
      },

      alipayRules: {
        publish_end_time: [{ required: true, message: '请选择券发放结束时间 ', trigger: 'change' }],
        valid_end_time: [{ required: true, message: '请选择券可使用的结束时间', trigger: 'change' }],
        valid_days_after_receive: [{ required: true, message: '请选择有效天数', trigger: 'blur' }],
      }
    }
  },

  methods: {
    // 点击提交
    onSubmit() {
      this.$refs.alipayForm.validate(async valid => {
        if (valid) {
          let {alipayForm} = this


          this.btnLoading = true
          const res = await voucherModify(alipayForm)
          this.btnLoading = false

          if (!res.code) {
            this.$message.success(res.msg)
            this.$router.back()
            return
          }

          this.$message.error(res.msg)
        } else {
          return false
        }
      })
    }
  },

  async mounted() {
    if(this.$route.query.id){
      let {min_id:id,id:alipay_activity_id} = this.$route.query

      
      voucherQuery({
        alipay_activity_id,
        id
      }).then(res=>{
        if(!res.code){
          let 
          {data} = res,
          {
            period_type
          } = data.voucher_use_rule_info.voucher_use_time_info,
          {publish_end_time} = data.voucher_send_mode_info.voucher_send_rule_info;

          this.period_type = period_type;
          this.alipayForm = {
            alipay_activity_id,
            id,
            publish_end_time
          }

          if(period_type === 'RELATIVE'){
            let {relative_period_info} = data.voucher_use_rule_info.voucher_use_time_info,
             {valid_days_after_receive} = relative_period_info;
            this.alipayForm.valid_days_after_receive = valid_days_after_receive;
          }else{
            let {absolute_period_info} = data.voucher_use_rule_info.voucher_use_time_info,
              {valid_end_time} = absolute_period_info;
            this.alipayForm.valid_end_time = valid_end_time;
          }
          return;
        }

        this.$message.error(res.msg)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.flexBox {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  &:last-of-type {
    margin-bottom: 0;
  }

  .inp {
    flex: 1;
  }

  .btn {
    margin-left: 10px;
  }
}

.flex {
  display: flex;
  align-items: center;
}
</style>
